<template>
  <view>
    <!-- 搜索栏 -->
    <view class="search">
      <uni-section class="uni-searchbar" >
        <uni-search-bar
          placeholder="搜索商品名称"
          bgColor="#dedede"
          @confirm="searchOrders"
          v-model="searchKeyword"
        />
      </uni-section>
    </view>

    <!-- 订单滚动列表 -->
    <view class="order-scroll">
      <scroll-view scroll-y style="height: 100%;">
        <view v-for="(order, index) in filteredOrderList" :key="index" class="order-item">
          <view class="order-header">
            <text>订单号: {{ order.orderId }}</text>
            <text>状态: {{ getOrderStatus(order.orderStatus) }}</text>
          </view>

          <!-- 商品详情 -->
          <view class="product-card" @click="gotoProductDetail(order.productId)">
            <image
              class="product-image"
              :src="order.imageUrl"
              mode="aspectFill"
            />
            <view class="product-info">
              <text>{{ order.name || '加载中...' }}</text>
            </view>
          </view>

          <!-- SKU 信息 -->
          <view class="sku-card" v-for="(sku, i) in order.orderSkus" :key="i">
            <text class="sku-info">{{ sku.skuName }}</text>
            <text class="sku-info">单价：{{ sku.unitPrice }}</text>
            <text class="sku-info">数量：{{ sku.quantity }}</text>
            <text class="sku-info">合计：{{ sku.totalPrice }}</text>
          </view>

          <view class="order-footer">
            <text>总金额:</text>
            <text class="total-amount">{{ order.totalAmount }} 元</text>
          </view>
		  <view class="foot-button">
		        <button type="warn" @click="showPopupDeleteOrder(order.orderId)"  class="delivery-but">删除订单</button>
		          <button type="primary" class="view-but">查看物流</button>
				  </view>
		    </view>
		</scroll-view>
		</view>
		      <!-- 删除确认弹窗 -->
		      <uni-popup ref="deletePopup" background-color="#fff" >
		        <view class="popup-content">
		          <text class="text">确认删除订单吗？</text>
		          <view class="popup-buttons">
		            <button type="default" @click="closePopup()">取消</button>
		            <button type="warn" @click="confirmDeleteOrder()">确定</button>
		          </view>
		        </view>
		      </uni-popup>
  </view>
</template>
<script>
  import { getOrderByUserId,  deleteOrder} from '../../../api/order/order.js';
  import { getProductDetail } from '../../../api/productDetail/productDetail.js';

  export default {
    data() {
      return {
        userId: null, // 用户ID
        orderList: [], // 原始订单列表
        searchKeyword: '', // 搜索关键字
        filteredOrderList: [] ,// 筛选后的订单列表
		 currentOrderId: null // 当前待删除的订单ID
      };
    },

    onLoad() {
      // 获取用户信息并加载订单
      if (!this.userId) {
        this.$store
          .dispatch('GetInfo')
          .then(() => {
            this.userId = this.$store.state.user.userId;
            console.log("用户ID:", this.userId);
            this.getOrder();
          })
          .catch((error) => {
            console.error("获取用户信息失败:", error);
          });
      }
    },

    methods: {
      // 获取订单
      async getOrder() {
        try {
          const data = await getOrderByUserId(this.userId); // 获取订单列表
          // 更新订单列表，添加商品详情
          this.orderList = await Promise.all(
            data.map(async (order) => {
              // 从订单的 productId 获取商品详情
              const productDetail = await this.fetchProductDetail(order.productId);

              return {
                ...order, // 保留订单的原始数据
				productId:productDetail.productId,
                name: productDetail?.productName || '未知商品', // 添加商品名称
                imageUrl: this.getPrimaryImageUrl(productDetail?.images || []) // 添加商品图片
              };
            })
          );

          // 初始显示完整订单列表
          this.filteredOrderList = this.orderList;

          console.log("订单列表更新:", this.orderList);
        } catch (error) {
          console.error("获取订单失败:", error);
        }
      },

      // 获取商品详情
      async fetchProductDetail(productId) {
        try {
          const productDetail = await getProductDetail(productId);
          return productDetail;
        } catch (error) {
          console.error("获取商品详情失败:", error);
          return null; // 如果失败，返回 null
        }
      },

   getPrimaryImageUrl(images) {
      if (!images || images.length === 0) {
        // 返回默认动态图片路径
        return '/static/home/dj.jpg'; // 默认图片的 URL
      }
     
      const primaryImage = images.find(image => image.isPrimary);
      // 返回主图 URL 或第一张图片的 URL，如果都没有，则返回默认图片
      return primaryImage?.imageUrl || images[0]?.imageUrl || '/static/home/dj.jpg';
    },

      // 转换订单状态
      getOrderStatus(status) {
        const statusMap = {
          "0": "待支付",
          "1": "已支付",
          "2": "已取消"
        };
        return statusMap[status] || "未知状态";
      },

      // 搜索订单
      searchOrders() {
        if (this.searchKeyword.trim() === '') {
          // 如果搜索关键字为空，则恢复显示所有订单
          this.filteredOrderList = this.orderList;
        } else {
          // 按商品名称模糊查询
          const keyword = this.searchKeyword.trim().toLowerCase();
          this.filteredOrderList = this.orderList.filter((order) => {
            return order.name && order.name.toLowerCase().includes(keyword);
          });
        }

        console.log("筛选后的订单列表:", this.filteredOrderList);
      },
	   // 弹出删除确认框
	      showPopupDeleteOrder(orderId) {
	        this.currentOrderId = orderId; // 设置当前订单ID
	        this.$refs.deletePopup.open(); // 打开弹窗
	      },
	  
	      // 关闭弹窗
	      closePopup() {
	        this.$refs.deletePopup.close();
	      },
	  
	      // 确认删除订单
	      async confirmDeleteOrder() {
	        if (!this.currentOrderId) return;
	  
	        try {
	          await deleteOrder(this.currentOrderId); // 调用删除订单API
	          this.closePopup(); // 关闭弹窗
	          this.getOrder(); // 刷新订单列表
	        } catch (err) {
	          console.error("删除订单失败:", err);
	          wx.showToast({ title: "订单删除失败", icon: "error" });
	        }
	      }, 
		 gotoProductDetail(productId){
			wx.navigateTo({
		 	  url: `/pages/product/detail/detail?productID=${productId}`
		  })
		 },
    },
	
  };
</script>


<style lang="scss">

.order-scroll {
  padding: 10px;
  background-color: #f5f5f5; // 背景色提升整体视觉效果
}

.order-item {
  margin-bottom: 20px;
  border: 1px solid #e0e0e0; // 边框颜色更浅，避免突兀
  border-radius: 8px; // 圆角更柔和
  padding: 12px;
  background-color: #c4ffc4; // 保持卡片清晰对比
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // 添加轻微阴影
}

.order-header,
.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center; // 保证内容垂直居中
  margin-bottom: 12px;
}

.order-header text:first-child {
  font-weight: bold; // 突出订单号
  color: #333;
}

.order-header text:last-child {
  font-size: 14px; // 状态字体稍小
  color: #999; // 状态颜色较淡
}

.product-card {
  display: flex;
  align-items: center; // 图片和文字对齐
  margin-bottom: 10px;
  border: 1px solid #e0e0e0;
  padding: 10px;
  border-radius: 6px;
  background-color: #fafafa;
}

.product-image {
  width: 70px; // 图片稍大
  height: 70px;
  margin-right: 12px;
  border-radius: 6px; // 图片圆角更柔和
  border: 1px solid #ddd; // 图片边框
}

.product-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-info text {
  margin-bottom: 5px;
  font-size: 14px;
  color: #555; // 调整文字颜色
}

.sku-card {
  display: flex; // 使用 flex 布局
  justify-content: space-between; // 保证每列均匀分布
  align-items: center; // 垂直方向居中
  padding: 8px 0;
  border-top: 1px solid #eaeaea; // 添加分隔线
  font-size: 14px;
}

.sku-info {
  flex: 1; // 每列等宽
  text-align: center; // 文本居中
  color: #666; // SKU 文字颜色稍浅
}

.order-footer text {
  font-size: 16px;
  font-weight: bold;
}

.total-amount {
  color: #ff4d4f; // 红色金额
}
.foot-button{
	display: flex;
	justify-content: space-between;
}
.popup-content{
	background-color: #ffaa7f;
	width: 240px;
	padding: 20px;
	 border-radius: 10px;
	.text{
		align-items: center;
		color: #00aa00;
		font-size: 20px;
	}
}
.popup-buttons{
	margin-top: 30px;
	display: flex;
	justify-content: space-around;
}
</style>
